<template>
  <div class="addresslist">
    <template v-if="isShow">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        :address="list.addressDetail"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </template>
    <template v-else>
      <van-address-edit
        :area-list="areaList"
        :address-info="item"
        show-detail
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </template>
  </div>
</template>

<script>
import { AddressList, AddressEdit, Area, Toast } from "vant";
import areaList from "@/utils/city.js";
import API from "@/utils/api.js";
export default {
  name: "AddressList",
  data() {
    return {
      chosenAddressId: "",
      isShow: true,
      areaList,
      searchResult: [],
      item: {},
      list: [],
      address: "",
    };
  },
  created() {
    this.getAddressList();
  },
  methods: {
    getAddressList() {
      this.$get(API.GET_ADDRESS_LIST, {
        token: this.$store.state.token,
      }).then((res) => {
        console.log("列表", res);
        this.list = res.data.list;
        let arr = [];
        res.data.list.map((item, index) => {
          arr.push(
            Object.assign(item, {
              address:
                item.province + item.city + item.county + item.addressDetail,
            })
          );
        });
        this.list = arr;
        //利用字符串的replace方法和/ /g正则表达式的全局匹配 修改后端键值
        // res.data.list[0] = JSON.parse(
        //   JSON.stringify(res.data.list[0]).replace(/addressDetail/g, "address")
        // );
      });
    },
    //新增
    onAdd() {
      this.isShow = false;
    },
    //点击编辑
    onEdit(item) {
      this.isShow = false;
      this.item = item;
    },
    //保存
    onSave(content) {
      this.isShow = true;
      console.log(content);
      this.$post(API.POST_ADDRESS_SAVE, {
        token: this.$store.state.token,
        name: content.name,
        tel: content.tel,
        province: content.province,
        city: content.city,
        county: content.county,
        addressDetail: content.addressDetail,
        isDefault: content.isDefault,
      }).then((res) => {
        this.getAddressList();
        Toast.success("保存成功");
        console.log(res);
      });
    },
    //删除
    onDelete(content) {
      this.$post(API.POST_ADDRESS_DELETE, {
        token: this.$store.state.token,
        id: content.id,
      }).then((res) => {
        this.getAddressList();
        this.isShow = true;
        Toast.success("删除成功");
      });
    },
  },
  components: {
    [AddressList.name]: AddressList,
    [AddressEdit.name]: AddressEdit,
    [Area.name]: Area,
    [Toast.name]: Toast,
  },
};
</script>

<style lang="less" scoped>
.addresslist {
  margin-top: 46px;
  .van-address-list__bottom {
    background-color: transparent;
  }
}
</style>